<template>
  <div class="app-container">
    <el-table
      header-cell-class-name="tableheader"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      v-loading="Loading"
      border
      fit
      element-loading-text="加载中···"
      highlight-current-row
      :data="data"
      class="taketable"
    >
      <el-table-column prop="addtime" label="操作时间"> </el-table-column>
      <el-table-column prop="upgrade_Time" label="升级时间"> </el-table-column>
      <el-table-column prop="projectName" label="项目名称"> </el-table-column>
      <el-table-column prop="name" label="APP名称"> </el-table-column>
      <el-table-column prop="version" label="版本"> </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <span v-if="scope.row.taskState === 0">未执行</span>
          <span v-if="scope.row.taskState === 1">已执行</span>
          <span v-if="scope.row.taskState === 2">已取消</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200px">
        <template slot-scope="scope">
          <el-button
            class="bianjixinxi macbianji"
            type="primary"
            @click="project(scope.row)"
            >详情</el-button
          >
          <el-button
            type="primary"
            v-if="scope.row.taskState === 0"
            @click="stoptask(scope.row)"
          >
            取消升级
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title=""
      :visible.sync="updialog"
      :append-to-body="true"
      :close-on-click-modal="false"
      width="70%"
    >
      <div class="clearfix">
        <div style="width: 46%; float: left">
          <el-form
            ref="dialogForm"
            label-width="120px"
            :model="dialogForm"
            class="topform"
          >
            <el-form-item label="项目名称：">
              <el-select
                v-model="dialogForm.appProject_Id"
                disabled
                placeholder="请输入项目名称"
              >
                <el-option
                  v-for="item in Projects"
                  :key="item.id"
                  :label="item.projectName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="APP名称：">
              <el-input disabled v-model="dialogForm.app_Name"></el-input>
            </el-form-item>
            <el-form-item label="版本号：">
              <el-input disabled v-model="dialogForm.app_Version"></el-input>
            </el-form-item>
            <el-form-item label="升级备注：">
              <el-input disabled v-model="dialogForm.update_Remark"></el-input>
            </el-form-item>
            <el-form-item style="margin: 0" label="是否定时升级：">
              <el-switch
                disabled
                v-model="dialogForm.is_Timing"
                active-text="定时升级"
                inactive-text="立即升级"
              >
              </el-switch>
            </el-form-item>
            <el-form-item
              style="margin-top: 22px"
              v-if="dialogForm.is_Timing === true"
              label="定时升级时间："
            >
              <el-date-picker
                disabled
                v-model="dialogForm.upgrade_Time"
                type="datetime"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                clearable
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </el-form-item>
            <p v-else>立即升级是5分钟后开始升级。</p>
            <el-form-item
              v-if="dialogForm.appProject_Id !== 'SH'"
              label="是否强制升级："
            >
              <el-switch disabled v-model="dialogForm.isForce"></el-switch>
            </el-form-item>
          </el-form>
        </div>
        <div style="width: 50%; float: right">
          <p style="width: 100%; margin: 10px 0;font-size:16px">
            <span style="float: left">升级机器列表</span
            ><span style="float: right">机器数量：{{ dialoglist.length }}</span>
          </p>
          <el-table
            header-cell-class-name="tableheader"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)"
            v-loading="Loading"
            border
            fit
            element-loading-text="加载中···"
            highlight-current-row
            class="orderlist1"
            :data="dialoglist"
            tooltip-effect="dark"
            style="width: 100%"
          >
            <el-table-column prop="projectName" label="项目名称">
            </el-table-column>
            <el-table-column prop="mchName" label="机器名称"> </el-table-column>
            <el-table-column prop="mchSn" label="机器SN"> </el-table-column>
            <el-table-column prop="baseusername" label="用户账号">
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-dialog>
    <div class="pagination">
      <el-pagination
        style="text-align: center"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="QueryForm.page"
        :page-size="QueryForm.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  activated() {
    this.getdata();
    this.getProjects();
  },
  created() {
    this.getdata();
    this.getProjects();
  },
  data() {
    return {
      Loading: true,
      QueryForm: {
        IsPage: true,
        page: 1,
        pagesize: 15,
      },
      dialogForm: {},
      dialogrule: {},
      dialoglist: [],
      data: [],
      Projects: [],
      total: 0,
      updialog: false,
    };
  },
  methods: {
    getProjects() {
      this.$pcpost(this.$master + "/AppUpdate/Get_AppProject_List").then((d) => {
        this.Projects = d.data.rows;
      });
    },
    getdata() {
      this.$pcpost(this.$master + "/AppUpdate/Get_Task_List", this.QueryForm).then(
        (data) => {
          if (data.code === 0) {
            this.Loading = false;
            this.data = data.data.rows;
            this.total = data.data.total;
          }
        }
      );
    },
    project(item) {
      this.$pcpost(this.$master + "/AppUpdate/Get_Task_Details", {
        TaskId: item.id,
      }).then((data) => {
        this.dialoglist = data.data.mchList;
        this.dialogForm = data.data;
        this.updialog = true;
      });
    },
    stoptask(item) {
      this.$confirm("此操作取消这次升级任务?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$pcpost(this.$master + "/AppUpdate/Stop_Task", {
            id: item.id,
          }).then((data) => {
            if (data.code === 0) {
              this.getdata();
              this.$notify.success({
                title: "成功",
                message: data.msg,
              });
            } else {
              this.$notify.error({
                title: "错误",
                message: data.msg,
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleSizeChange(v) {
      this.QueryForm.pagesize = v;
      this.getdata();
    },
    handleCurrentChange(v) {
      this.QueryForm.page = v;
      this.getdata();
    },
  },
};
</script>

<style scoped>
@media (max-width: 1366px) {
  .el-button + .el-button {
    margin: 10px 0 0 0;
  }
}
</style>
